<script setup lang="ts">
import { ref, reactive, shallowRef } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import type { ProductForm } from '@/types/product';
import type { SkuItem } from '@/types/product';
import skuPopup from '../components/skuPopup.vue';
import { useOrderInfo } from '@/stores/orderInfo';
import { useToastLoading } from '@/composables/useToastLoading';
import { showToast } from 'vant';
import { tGoodsDetail } from '@/common/api/hbMarket';
// import userAddress from '../components/userAddress.vue';

const route = useRoute();
const router = useRouter();
const orderInfo = useOrderInfo();

// 定义引用
const skuPopupRef = shallowRef<InstanceType<typeof skuPopup>>();

const pid = ref((route.query?.pid as string) || '');
const loading = ref(false);

let strMobile ="";

const productInfo = reactive<ProductForm>({
  pid: '',
  title: '',
  images: '',
  category: '',
  memo: '',
});

const onLoad = async () => {
  if (!pid.value) {
    return showToast('获取pid失败');
  }
  loading.value = true;
  try {
    const res = await tGoodsDetail({ pid: pid.value });
    // console.log('onLoad: ', res.result.data);
    if (res.result.data) {
      strMobile=res.result.data.mobile;
      Object.assign(productInfo, res.result.data);
    }
  } catch {
    /** empty */
  } finally {
    loading.value = false;
  }
};
onLoad();

useToastLoading(loading);

//拨打电话
const makePhoneCall =() => {
  // 执行拨打电话的操作
  ///判断strMobile是否为空
  if (strMobile) {
    window.location.href = `tel:${strMobile}`;
  } else {
    showToast('手机号为空，无法拨打电话');
  }
}

// 打开sku弹窗
const openSku = () => {
  skuPopupRef.value?.open();
};

// sku弹窗提交
const skuPopupSubmit = (skuInfo: SkuItem, cnt: number) => {
  console.log('skuInfo: ', skuInfo);
  orderInfo.clearOrderInfo();
  orderInfo.setOrderInfo({ skuInfo, pid: productInfo.pid, cnt, images: productInfo.images });
  router.push('/hbMarket/orderDetail');
};
</script>
<template>
  <div class="productDetail scroll-hidden">
    <div v-if="pid" v-bind="$attrs">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(url, idx) in productInfo.images.split(',')" :key="idx">
          <van-image width="100%" height="100vw" fit="contain" :src="url" />
        </van-swipe-item>
      </van-swipe>
      <div class="bg-[#fafafa] pb-2">
        <van-cell value-class="absolute-cell-value" :title="productInfo.title || '-'" :label="productInfo.memo">
          <!-- <template #value>
            <span class="text-[red] text-sm">￥{{ minPrice || 0 }}</span>
          </template> -->
        </van-cell>
        <van-cell title="规格" border is-link @click="openSku" />
      </div>
      <div class="pb-5">
        <h2 class="p-3">商品详情</h2>
        <div class="p-2" v-if="productInfo.images">
          <van-image v-for="url in productInfo.images.split(',')" :key="url" width="100%" fit="cover" :src="url" />
        </div>
      </div>
      <skuPopup ref="skuPopupRef" :pid="pid" @on-submit="skuPopupSubmit" />
      <div>
        <van-action-bar safe-area-inset-bottom placeholder>
          <van-action-bar-icon icon="shop-o" text="首页" @click="router.back()" />
          <van-action-bar-icon icon="phone-o" text="电话" @click="makePhoneCall" />
          <van-action-bar-button type="danger" color="#EC2D69" text="立即购买" @click="openSku" />
        </van-action-bar>
      </div>
    </div>
    <div v-if="!pid">
      <van-empty image="error" description="参数异常" />
    </div>
  </div>
</template>
<style lang="less" scoped>
.productDetail {
  height: 100%;
  overflow-y: auto;
  :deep(.absolute-cell-value) {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
</style>
